

<template>
  <div class="app-container">
    <div class="title-flex">
      <div>专家分组列表</div>
      <div>
        <el-button-group class="ml-4">
          <el-button type="primary" @click="dialogFormVisible = true" > 新增</el-button>
          <el-button type="primary" @click="deleteList" > 删除</el-button>
        </el-button-group>
      </div>
    </div>
    <div>
      <zjfzTable ref="deleteChildList"></zjfzTable>
    </div>

  </div>
  <el-dialog v-model="dialogFormVisible" title="新增" width="50%">
    <div class="dialog-flex">
      <div >
        <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            label-width="100px"
            class="demo-ruleForm"
            :size="formSize"
            status-icon
        >
          <el-form-item label="专家组名称" prop="name" >
            <el-input v-model="ruleForm.name" />
          </el-form-item>
          <el-form-item label="备注" >
            <el-input type="textarea" v-model="ruleForm.note" />
          </el-form-item>
          <el-form-item >
            <div style="margin: auto" >
              <el-button type="primary" @click="submitForm(ruleFormRef)">
                新增
              </el-button>
              <el-button @click="resetForm(ruleFormRef)">关闭</el-button>
            </div>

          </el-form-item>
        </el-form>
      </div>
    </div>


  </el-dialog>
</template>
<script lang="ts" setup>
import {DrawerProps, ElMessage, ElMessageBox} from "element-plus";
import zjfzTable from './zjfzTable.vue'; //表格组件
import {onBeforeMount, onBeforeUpdate, onMounted, reactive, ref, watch} from "vue";
import {insertExpertGroup,getExpertGroupList} from "@/api/researcherNavApi/zjfzApi"

// 编辑
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  name: '',
  note: '',
})

interface RuleForm {
  name: string
  note: string
}
const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: '请输入专家组名称', trigger: 'blur' },
  ],

})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      insertExpertGroup(
          {
            name:ruleForm.name,
            note :ruleForm.note
          }

      )
          .then((res)=>{
            if(res.code == 200){
              ElMessage({
                type: 'success',
                message: res.data,
              })
              deleteChildList.value.getlist(1,10)
              formEl.resetFields()
              Object.assign(ruleForm,{
                note:''
               })
              dialogFormVisible.value = false
            }else {
              ElMessage({
                type: 'info',
                message: res.msg,
              })
            }
          })
    } else {
      console.log('error submit!', fields)
    }
  })
}
const resetForm = (formEl: FormInstance | undefined) => {
  console.log(formEl)
  if (!formEl) return
  formEl.resetFields()
  ruleForm.note = ''
  dialogFormVisible.value = false
}
// 编辑
const deleteChildList = ref<any>();
const deleteList= function (){
  deleteChildList.value.open()
}


</script>
<style scoped lang="scss">
.title-flex{
  display: flex;
  justify-content: space-between;
  text-align: center;

}
.dialog-flex{
  display: flex;
}
.dialog-flex > div{
  width: 90%;
}
</style>